<template>
    <div class="person">
       <h2>姓名：{{name}}</h2>
       <h2>年龄：{{age}}</h2>
       <button @click="changeName">修改名字</button>
       <button @click="changeAge">修改年龄</button>
       <button @click="showTel">查看联系方式</button>
       <hr>
       <h3>a:{{ a }}----c:{{ c }}</h3>
       <button @click="b">测试</button>
    </div>
</template>

<script lang="ts">
    export default{
        name:"Person",
        beforeCreate(){
            console.log("beforeCreate");
            
        },
        data(){
            console.log("ll");
            
            return {
                a:100,
                c:this.name,//这样的情况是能得到的
            }
        },
        methods:{
            b(){
                console.log("KKK");
            }
        },
        setup(){//Vue3中已经开始弱化this了！！！
            console.log("setup");
            
            //数据
            let name="张三"
            let age=18
            let tel='13847382122'
            //方法
            const changeName=()=>{
                name+='~'
            }
            const changeAge=()=>age++
            const showTel=()=>alert(tel)

            //返回一个对象！！！
            return{
                name,age,tel,changeName,changeAge,showTel
            }

            //一个渲染函数
            // return ()=>"哈哈"
        }
    }
</script>

<style scoped>
.person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
</style>